import React, {useState} from 'react';
import {Button, Image,Radio,message} from "antd";
import './content.css'
import ImageSlider from "./imageSlider";

//常量要放在函数外面
const sizes=['XS','S','M','ML','L','XL','XXl']
function ContentList(props) {

    const [size,setSize]=useState('')
    const addCard = (el) => {
        if(!el.hasOwnProperty('visible')){
            message.error('请选择尺寸');
        }else{
            el.number=1
            // 调用父组件传递过来的回调函数，并将值传递给它
            props.onChildClick(el);
            message.error('加购成功');
        }
    }
    //修改衣服尺寸
    //react不可以
    const onChange=(e)=> {
        setSize(e.target.value)
        props.productList?.forEach((item)=>{
            const arr=item.availableSizes.filter((val) => val === e.target.value)
            if(arr.length>0){
                item.visible=false
                item.size=e.target.value
            }else{
                item.visible=true
                item.size=e.target.value
            }
        })

    }

    return (
        <div className="content">
            <div className="foundStyle" style={{paddingRight:70}}>
                Size:
                <Radio.Group onChange={onChange} defaultValue="">
                    {sizes.map((item)=>{
                        return(
                            <Radio.Button value={item} style={{margin:5}} key={item}>{item}</Radio.Button>
                        )

                    })}
                </Radio.Group>
            </div>

            <div style={{width:'90%'}}>
                <div className="foundStyle">{props.productList.length} Product(s) found</div>
                <div className='image-list'>
                        {
                            props.productList.map((product)=>{
                                return(
                                    <div className='image-item' key={product.id}>
                                        {/*<ImageSlider images={product.sku} />*/}
                                        <img className={"logoStyle"} src={require(`../products-images/${product.sku}-1-product.webp`)} alt=""/>
                                        <div style={{width:220,paddingTop:16,textAlign:'center',fontSize: 16,height:40}}>{product.title}</div>
                                        <div style={{width:220,textAlign:'center',paddingTop:23,fontSize: 23}}>
                                            <span style={{fontSize: 13}}>{product.currencyFormat}</span>
                                            <span>{product.price.toFixed(2)}</span>
                                        </div>
                                        <div style={{width:220,textAlign:'center',paddingTop:23,color: '#9C9B9B',fontSize: 16}}>{`or ${product.installments}x${product.currencyFormat}${(product.price/product.installments).toFixed(2)}`}</div>
                                        <Button style={{backgroundColor:product.visible?'':'#1B1A20',color:product.visible?'':'#FFF',width: 220,height: 48,marginTop:23}} onClick={()=>{addCard(product)}} disabled={product.visible}>Add to card</Button>
                                    </div>
                                    )
                            })
                        }
                </div>
            </div>
        </div>
    );
}

export default ContentList;